<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <iframe :src="docUrl" style="width: 100%; height: 500px; border:none;" />
      </el-col>
      <el-col :span="8">
        <el-form ref="form" :model="totp">
          <el-form-item label="状态">
            <el-switch v-model="totp.status" active-text="已开启" inactive-text="已关闭" @change="updateStatus" />
          </el-form-item>
          <el-form-item label="密钥">
            <el-button type="danger" @click="resetQrCode()">重置二维码</el-button>
          </el-form-item>
          <el-form-item label="请扫描下方二维码添加">
            <div v-show="totp.status" ref="qrCodeRef" class="" />
          </el-form-item>
          <el-form-item label="验证码">
            <el-input v-model="totp.code" placeholder="请输入验证码" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="verifyCode">验证</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">

</style>

<script>
import request from '@/utils/request'
import QRCode from 'qrcodejs2'

export default {
  name: 'TwoFactorAuth',
  data() {
    return {
      totp: {
        status: 0,
        qrCode: null,
        code: null
      },
      host: process.env.VUE_APP_BASE_API,
      docUrl: null
    }
  },
  mounted() {
    this.docUrl = this.host.substring(0, this.host.indexOf('/admin')) + '/plugin/2fa/admin/index'
    request({
      baseURL: this.host,
      method: 'get',
      url: '/plugin/2fa/admin/status'
    }).then(res => {
      this.totp.status = res.data.status === 1
      if (this.totp.status) {
        this.getQrCode()
      }
    })
  },
  methods: {
    getQrCode() {
      request({
        baseURL: this.host,
        method: 'get',
        url: '/plugin/2fa/admin/qrCode'
      }).then(res => {
        const url = decodeURIComponent(res.data.qrCode)
        this.$refs.qrCodeRef.innerHTML = ''
        this.totp.qrCode = new QRCode(this.$refs.qrCodeRef, {
          text: url,
          width: 256,
          height: 256,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      })
    },
    resetQrCode() {
      request({
        baseURL: this.host,
        method: 'put',
        url: '/plugin/2fa/admin/resetSecret'
      }).then(res => {
        this.totp.qrCode = res.data.qr_code
        this.$message.success('重置成功')
        this.getQrCode()
      })
    },
    verifyCode() {
      request({
        baseURL: this.host,
        method: 'post',
        url: '/plugin/2fa/admin/verify',
        data: {
          code: this.totp.code
        }
      }).then(() => {
        this.$message.success('验证成功')
      })
    },
    updateStatus() {
      request({
        baseURL: this.host,
        method: 'put',
        url: '/plugin/2fa/admin/updateStatus',
        data: {
          status: this.totp.status
        }
      }).then(() => {
        if (!this.totp.status) {
          this.totp.qrCode = null
        } else {
          this.getQrCode()
        }
        this.$message.success('更新成功')
      })
    }
  }
}
</script>
